<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <!-- 侧边栏宽度现在固定为 200px -->
      <el-aside width="200px" style="min-height: 100vh; background-color: #ad2d30; position: fixed;" >
        <div style="height: 60px; color: #ffffff; display: flex; align-items: center; justify-content: center">
          <span style="font-size: 20px">后台管理系统</span>
        </div>

        <!-- el-menu 移除 collapse 相关的属性 -->
        <el-menu router background-color="#ad2d30" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#ffffff" style="border: none" :default-active="$route.path">
          <el-menu-item index="/main/home" @click="updatePageKey(1)">
            <i class="el-icon-menu"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/main/aiLearningAnalysis" @click="updatePageKey(4)">
            <i class="el-icon-data-board"></i>
            <span slot="title">AI学情分析</span>
          </el-menu-item>
          <el-menu-item index="/main/courseAttendanceRanking" @click="updatePageKey(1)">
            <i class="el-icon-warning"></i>
            <span slot="title">课程出勤top</span>
          </el-menu-item>
          <el-menu-item index="/main/absencePrediction" @click="updatePageKey(1)">
            <i class="el-icon-crop"></i>
            <span slot="title">预测缺勤</span>
          </el-menu-item>

          <el-menu-item index="/main/userRecommendation" @click="updatePageKey(1)">
            <i class="el-icon-user"></i>
            <span slot="title">协同过滤</span>
          </el-menu-item>
          <el-menu-item index="/main/attendanceSearch" @click="updatePageKey(1)">
            <i class="el-icon-search"></i>
            <span slot="title">搜索</span>
          </el-menu-item>
          <el-menu-item index="/main/data" @click="updatePageKey(2)">
            <i class="el-icon-house"></i>
            <span slot="title">可视化大屏</span>
          </el-menu-item>
          <el-submenu index="/main/user" @click="updatePageKey(3)">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </template>
            <!-- 子菜单项保持不变 -->
            <el-menu-item index="/main/user/students">学生账号管理</el-menu-item>
            <el-menu-item index="/main/user/teachers">教师账号管理</el-menu-item>
            <el-menu-item index="/main/user/admins">管理员账号管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <!-- 内容区域的 margin-left 固定为 200px -->
      <el-container style="margin-left: 200px;">
        <!--头部区域-->
        <!-- header 的 left 位置固定为 200px -->
        <el-header style="position: fixed; top: 0; left: 200px; right: 0; z-index: 1000; background-color: #fff; display: flex; align-items: center; height: 60px; line-height: 60px; box-shadow: 0 1px 4px rgba(0,21,41,.08); padding: 0 20px;">
          <div style="width: 100%; display: flex; align-items: center;">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 0">
              <el-breadcrumb-item v-if="currentPageKey === 1">系统首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="currentPageKey === 2">可视化大屏</el-breadcrumb-item>
              <el-breadcrumb-item v-if="currentPageKey === 3">用户管理</el-breadcrumb-item>
              <!-- 新增 AI学情分析 的面包屑 -->
              <el-breadcrumb-item v-if="currentPageKey === 4">AI学情分析</el-breadcrumb-item>
              <!-- 面包屑新增结束 -->
            </el-breadcrumb>

            <!-- flex 容器填充剩余空间，并将右侧元素推到最右边 -->
            <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end;">
              <!-- !!! 折叠侧边栏的图标已移除 !!! -->

              <!-- 全屏图标 -->
              <i class="el-icon-full-screen" style="font-size: 20px; margin-right: 20px; cursor: pointer;" @click="handleFull"></i>

              <!-- 用户信息下拉菜单 -->
              <el-dropdown placement="bottom">
                <div style="display: flex; align-items: center; cursor: pointer;">
                  <img src="@/assets/logo2.png" alt="" style="width: 40px; height: 40px; margin: 0 5px">
                  <span>{{ userName }}</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
                  <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>

        <!-- 让页面内容下移，以免被固定的头部遮挡 -->
        <!-- Adjust padding-top based on header height -->
        <div style="padding-top: 60px; width: 100%;">
          <router-view></router-view>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request"; // 确保你已经引入了你的 request 工具

export default {
  name: 'HomeView',
  data() {
    return {
      currentPageKey: 1, // 默认的页面Key
      // isCollapse 和 collapseIcon 已移除
      // asideWidth 也不再需要作为响应式数据，因为它固定了
      userName: '未登录用户'
    }
  },
  // 计算属性，因为 asideWidth 是固定的，不需要计算
  // computed: {
  //   asideWidth() {
  //     return '200px'; // 侧边栏固定宽度
  //   }
  // },

  mounted() {   // 页面加载完成之后触发
    this.getUserInfo();
    // 初始化时根据当前路由设置 pageKey
    this.updatePageKeyFromRoute(this.$route.path);
  },
  watch: {
    // 监听路由变化，更新 pageKey
    '$route'(to, from) {
      this.updatePageKeyFromRoute(to.path);
    }
  },
  methods: {
    getUserInfo() {
      const userStr = localStorage.getItem('user');
      if (userStr) {
        try {
          const userData = JSON.parse(userStr);
          // 根据后端返回的数据结构，使用正确的字段名
          // 优先使用 userName，如果不存在，尝试 studentId，最后是默认值
          this.userName = userData.userName || userData.studentId || userData.name || '未知用户';
          console.log('获取到的用户名:', this.userName);
        } catch (e) {
          console.error('解析用户信息失败:', e);
        }
      }
    },
    // 根据路由路径更新 currentPageKey
    updatePageKeyFromRoute(path) {
      if (path.startsWith('/main/user')) {
        this.currentPageKey = 3;
      } else if (path === '/main/data') {
        this.currentPageKey = 2;
      } else if (path === '/main/aiLearningAnalysis') { // 新增的AI分析页面
        this.currentPageKey = 4;
      }
      // 其他主页相关的页面都设置为 1
      else if (path.startsWith('/main/')) {
        this.currentPageKey = 1;
      }
      // 对于非/main/开头的页面，可以设置为默认值或者其他值
      else {
        this.currentPageKey = 1; // 或者设置为一个默认值
      }
      console.log('Current Page Key:', this.currentPageKey);
    },
    // 这个方法现在主要由路由监听器调用，但也可以保留作为手动更新
    updatePageKey(key) {
      this.currentPageKey = key; // 更新当前页面Key
    },
    logout() {
      // 清除本地存储的用户信息
      localStorage.removeItem('user');
      // 跳转到登录页
      this.$router.push('/login');
      this.$message.success('退出登录成功');
    },
    // 处理全屏
    handleFull() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    },
    // handleCollapse 方法已移除
  }
}
</script>

<style scoped>
/* 调整样式，移除与折叠相关的部分，固定宽度和位置 */

.el-container {
  width: 100%; /* Ensure container takes full width */
}

/* el-aside 宽度固定，移除 transition */
el-aside {
  /* transition: width .3s; */ /* 移除过渡 */
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}

/* El-menu 样式保持不变，确保激活和悬停状态颜色正确 */
.el-menu--inline {
  background-color: #ad2d30 !important;
}
.el-menu--inline .el-menu-item {
  background-color: #ad2d30 !important;
  padding-left: 49px !important;
}
.el-menu-item:hover, .el-submenu__title:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
}
.el-menu-item:hover i, .el-submenu__title:hover i {
  color: #ffffff !important;
}
.el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-left: 4px solid #ffffff;
  border-radius: 0 !important;
  width: 100%;
  margin-left: 0 !important;
  padding-left: calc(20px + 29px + 4px) !important; /* 调整内边距以适应图标和指示条 */
}
/* 移除折叠状态下的激活样式调整 */
/* .el-menu.el-menu--collapse .el-menu-item.is-active {
  padding-left: 18px !important;
} */


.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip__trigger{
  color: #ffffff !important;
}
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 20px; /* 默认内边距 */
}
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 20px !important;
}

/* 调整子菜单项的样式 */
.el-submenu .el-menu-item {
  min-width: auto !important;
  padding-left: 49px !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.el-submenu .el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.el-submenu .el-menu-item.is-active {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-left: 4px solid #ffffff;
  padding-left: calc(49px + 4px) !important;
}


/* 如果有需要，调整子菜单展开时的图标 */
.el-submenu__icon-arrow {
  margin-top: -3px; /* vertically center the arrow */
}


el-aside {
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}

/* el-header 样式固定，移除 transition */
.el-header {
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px !important;
  line-height: 60px !important;
  /* Header 的 left 位置现在固定 */
  left: 200px;
  /* transition: left .3s; */ /* 移除过渡 */
}
/* 移除折叠状态下的 header left 调整 */
/* .el-container:has(.el-aside[style*="width: 64px"]) > .el-header {
  left: 64px;
} */


/* Adjust the margin-left for the main content */
/* Directly setting margin-left on the el-container or the content div */
/* <el-container style="margin-left: 200px;"> is now used in template */
/* The inner div with padding-top: 60px now ensures space for the fixed header */


/* Styles for breadcrumb and header controls alignment */
.el-header > div {
  display: flex;
  align-items: center;
  width: 100%;
}

.el-header .el-breadcrumb {
  flex-shrink: 0;
}

.el-header .el-dropdown {
  cursor: pointer;
}

.el-icon-full-screen {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
  /* margin-left: auto; */ /* 如果希望全屏图标紧贴面包屑右侧，可以使用这个 */
}

</style>